<template>
	<view style="padding: 30rpx;">
		<u-form :model="form" ref="uForm">
			<u-form-item label="新密码" prop="password" label-width="140">
				<u-input v-model="form.password" placeholder="需同时含有字母和数字，长度在6-12之间" />
			</u-form-item>
			<u-form-item label="确认密码" prop="rePassword" label-width="140">
				<u-input v-model="form.rePassword" placeholder="请再次输入密码" />
			</u-form-item>
			<x-ubutton type="primary" :ripple="true" @click="changePasswordClick()" shadow ripple-bg-color="#eee">修改密码</x-ubutton>
		</u-form>
	</view>
</template>

<script>
import xButton from '@/components/x-ubutton/x-ubutton.vue';
export default {
	components: {
		xButton
	},
	data() {
		return {
			form: {
				password: '',
				rePassword: '',
			},
			rules: {
				password: [
					{
						required: true,
						message: '请输入密码',
						trigger: ['change','blur'],
					},
					{
						// 正则不能含有两边的引号
						pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
						message: '需同时含有字母和数字，长度在6-12之间',
						trigger: ['change','blur'],
					}
				],
				rePassword: [
					{
						required: true,
						message: '请重新输入密码',
						trigger: ['change','blur'],
					},
					{
						validator: (rule, value, callback) => {
							return value === this.form.password;
						},
						message: '两次输入的密码不相等',
						trigger: ['change','blur'],
					}
				]
			}
		};
	},
	onLoad() {},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		changePassword() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					//console.log('验证通过');
					this.$http
						.post('/rest/resetPwd', {
							userId: uni.getStorageSync('userId'),
							newPassword: this.form.password
						})
						.then(res => {
							if (res.data.code == '0') {
								this.logout();
							}
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon: 'none'
							});
						});
				} else {
					//console.log('验证失败');
				}
			});
		},
		changePasswordClick() {
			uni.showModal({
				title: '确定要修改密码么？',
				success: e => {
					if (e.confirm) {
						this.changePassword();
					}
				}
			});
		},
		logout(){
			uni.setStorageSync('userId', '');
			uni.setStorageSync('deptId', '');
			uni.setStorageSync('roleKey', '');
			uni.setStorageSync('loginName', '');
			uni.setStorageSync('password', '');
			uni.reLaunch({
				url: '/pages/login/login'
			});
		},
	}
};
</script>
<style lang="css">
@import "/static/css/changepw.css";
</style>

<style lang="scss" scoped>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40rpx;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 100rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 28rpx;
	color: $u-content-color;
}

.button-demo {
	margin-top: 80rpx;
}
</style>
